<template>
  <div>
    <Modal
      loading
      closable
      :value="modal"
      ref="addModal"
      width="1000px"
      :mask-closable="false"
      :closable="false"
      scrollable
      title="添加角色">
      <Form ref="roleForm" :model="roleForm" :rules="ruleValidate" :label-width="100">
        <Row>
          <Col span="12">
            <FormItem label="角色名称" prop="name">
              <Input v-model="roleForm.name" class="form-input-length" placeholder="输入角色名称"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="别名" prop="enname">
              <Input v-model="roleForm.enname" class="form-input-length" placeholder="输入别名"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="上级角色" prop="parentName">
              <Input v-model="roleForm.parentName" style="display: none"/>
              <Button type="default" size="small" @click="openRoleTreeModal"
                      v-text="roleForm.parentName ? roleForm.parentName :'选择上级角色'"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="数据范围" prop="datascope">
              <Select v-model="roleForm.datascope" placeholder="选择数据范围" class="form-input-length">
                <Option value="1">所有权限</Option>
                <Option value="2">其他</Option>
                <Option value="4">仅个人</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="部门名称" prop="deptName">
              <Input v-model="roleForm.deptName" style="display: none"/>
              <Button type="default" size="small" @click="openDeptTreeModal"
                      v-text="roleForm.deptName ? roleForm.deptName :'选择所在部门'"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="排序值">
              <InputNumber :max="10" :min="1" v-model="roleForm.num"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="所属系统" prop="syscode">
              <AutoComplete
                v-model="roleForm.syscode"
                class="form-input-length"
                :data="sysList"
                :filter-method="filterMethod"
                placeholder="输入系统代码"
              >
              </AutoComplete>
            </FormItem>
          </Col>
        </Row>


      </Form>
      <div slot="footer" style="margin-left: 340px;">
        <Button type="default" size="large" @click="closeAddForm">取消</Button>
        <Button type="warning" size="large" @click="resetRoleForm">重置</Button>
        <Button type="primary" size="large" @click="childNodeOk('roleForm')">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {addRole} from '@/api/role'


  export default {
    name: "addform",
    data: () => ({
      open: false,
      rolemgt: {},
      roleForm: {
        name: '',
        enname: '',
        parentName: '',
        datascope: '',
        deptName: '',
        num: 0,
        syscode: '',
      },
      ruleValidate: {
        name: [
          {required: true, message: '角色名称不能为空', trigger: 'blur'}
        ],
        enname: [
          {required: false, message: '角色别名不能为空', trigger: 'blur'},
        ],
        parentName: [
          {required: true, message: '上级角色不能为空', trigger: 'blur'}
        ],
        datascope: [
          {required: true, message: '数据不能为空', trigger: 'blur,change'}
        ],
        deptName: [
          {required: true, message: '部门不能为空', trigger: 'blur'}
        ],
        syscode: [
          {required: true, message: '请输入系统代码', trigger: 'blur,change'}
        ],
      },
      sysList: [],
      selectedRole: {},
      selectedDept: {},
    }),
    methods: {
      childNodeOk(name) {
        let _that = this;
        this.$refs[name].validate((valid) => {
          let roleInfo = {
            parentId: this.selectedRole.id,
            level: this.selectedRole.level + 1,
            deptId: this.selectedDept.id,
            title: this.roleForm.name,
            datascope: this.roleForm.datascope,
            syscode: this.roleForm.syscode,
            name: this.roleForm.name,
            nameEn: this.roleForm.enname,
            sort: this.roleForm.num,
          };
          if (valid) {
            addRole(roleInfo).then(res => {
              let data = res.data;
              let message = data.message;
              let code = data.code;
              if (code === 200) {
                _that.rolemgt.$refs.roleTreeModal.resetRoleTreeModal();
                _that.rolemgt.$refs.deptTreeModal.resetDeptTreeModal();
                _that.closeAddForm();
                this.$Message.success(message);
                this.rolemgt.calcPages();
                this.rolemgt.initRoleTable();
              }
              if (code === 500) {
                this.$Message["error"]({background: true, content: message});
              }
            }).catch(err => {
              console.error("添加角色出错! " + err)
            });
          } else {
            return false;
          }
        })

      },
      resetRoleForm() {
        this.$refs.roleForm.resetFields();
      },
      openRoleTreeModal() {
        this.$parent.$parent.$refs.roleTreeModal.open = true;
        //触发查询
        this.$parent.$parent.$refs.roleTreeModal.initRoleTree();
      },
      openDeptTreeModal() {
        this.$parent.$parent.$refs.deptTreeModal.open = true;
        //触发查询
        this.$parent.$parent.$refs.deptTreeModal.initDeptTree();
      },
      filterMethod(value, option) {
        return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
      },
      closeAddForm() {
        this.open = false;
      },
      refreshRole() {
        this.selectedRole = this.$parent.$parent.$refs.roleTreeModal.selectedRole;
        this.roleForm.parentName = this.selectedRole.title;
        this.$refs.roleForm.validateField("parentName");
      },
      refreshDept() {
        this.selectedDept = this.$parent.$parent.$refs.deptTreeModal.selectedDept;
        this.roleForm.deptName = this.selectedDept.title;
        this.$refs.roleForm.validateField("deptName");
      },
    },
    computed: {
      modal() {
        return this.open;
      },
    },
    mounted() {
      this.rolemgt = this.$parent.$parent;
    }
  }
</script>

<style scoped>

</style>
